<template>
	<view class="searchBox">
		<f-navbar v-model:title="titleList.title" :iconLeft="titleList.iconLeft" />
		<u-search
			v-model.trim="searchParams.searchVal"
			@change="changeSearchVal"
			height="36"
			placeholder="请输入产品名称"
			inputAlign="center"
			:showAction="false"
			bgColor="#fff"
			focus="true"
			v-model="keyword"
		></u-search>
		<view v-if="searchParams.searchProductNameResult" class="staffRegister-search-result ff-bg-fff ff-font-13 animate__animated animate__fadeInDownBig">
			<view v-if="searchParams.searchProductNameList.length > 0">
				<view class="ff-text-center ff-padding-15" @click="productNameClick(item)" v-for="(item, index) of searchParams.searchProductNameList" :key="index">{{ item.companyName }}</view>
			</view>
			<view class="ff-color-999 ff-text-center ff-padding-15" v-else>查无此产品</view>
		</view>

		<f-loading ref="loading" />
		<f-uToast ref="uToast" />
	</view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();

// 导航栏相关
let titleList = reactive({
	title: '搜索',
	iconLeft: true,
	searchVal: ''
});

// 搜所框相关
let searchParams = reactive({
	searchVal: '', // 搜索的内容
	searchProductNameResul: false, // 搜索内容是否存在
	searchProductNameList: [], // 搜索对应相关产品的名字列表
	productNameList: [], // 产品名字列表
	installList: [], // 列表数据
	size: 5,
	current: 1
});
// 搜索输入触发
let changeSearchVal = e => {
	console.log(e);
};
</script>

<style scoped lang="scss">
.searchBox {
	padding: 30rpx;
}
</style>
<style scoped module lang="scss"></style>
